<template>
<div>
    <el-row>
        <el-col :span="12">
            <span class="case_show_span">报销人归属部门:{{dataFrom.deptNamePrint}}</span>
        </el-col>
        <el-col :span="12">
            <span class="case_show_span">姓名:{{dataFrom.expenseName}}</span>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <span class="case_show_span">填报日期:{{dataFrom.expenseTime}}</span>
        </el-col>
        <el-col :span="12">
            <span class="case_show_span">现金产生日期:{{dataFrom.cashTimeStart}}至{{dataFrom.cashTimeEnd}}</span>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <span class="case_show_span">项目名称:{{dataFrom.productNamePrint}}</span>
        </el-col>
    </el-row>
    <div>
        <el-table :data="itemData" show-summary :summary-method="getSummaries">
            <el-table-column prop="expenseContent" label="报销内容" :formatter="formatExpenseCon"></el-table-column>
            <el-table-column prop="costTime" label="发生日期">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.costTime,'{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="invoiceNum" label="单据张数"></el-table-column>
            <el-table-column prop="expenseMoney" label="金额"></el-table-column>
            <el-table-column prop="fileList" label="是否有附件">
                    <template slot-scope="scope">
                        <span v-if="scope.row.fileInfoList && scope.row.fileInfoList.length>0">有</span>
                        <span v-else>无</span>
                    </template>
                </el-table-column>
            <el-table-column prop="expenseRemark" label="备注" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="opt" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="showItemDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
        <el-dialog
            width="30%"
            title="填写现金单"
            :visible.sync="showItemVisible"
            append-to-body>
            <el-row>
                <el-col :span="12" class="case_show_span">
                报销内容:
                <span v-for="dict in ecOptions" :key="dict.dictValue">
                    <span v-if="itemForm.expenseContent == dict.dictValue">{{dict.dictLabel}}</span>
                </span>
                </el-col>
                <el-col :span="12" class="case_show_span">
                发生日期:{{ parseTime(itemForm.costTime,'{y}-{m}-{d}') }}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="case_show_span">
                    单据张数:{{itemForm.invoiceNum}}
                </el-col>
                <el-col :span="12" class="case_show_span">
                    金额(￥):{{itemForm.expenseMoney}}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="case_show_span">
                    附件:
                    <ul>
                        <li v-for="fileInfo in itemForm.fileInfoList" :key="fileInfo.fileId">
                            <a target="_blank" :href="httpUrl + fileInfo.filePath">{{fileInfo.name}}</a>
                        </li>
                    </ul>
                </el-col>
            </el-row>
                <el-col :span="24" class="case_show_span">
                    备注:{{itemForm.expenseRemark}}
                </el-col>
        </el-dialog>
</div>
</template>

<script>
import {showCash } from "@/api/product/cash";

export default {
    name:"cashShow",
    props:{
        propCashId:{
            type: Number,
            required: true
        },
    },
    data(){
        return {
            httpUrl:process.env.VUE_APP_BASE_API,
            dataFrom:{},
            itemData:[],
            itemForm:{},
            ecOptions:[],
            showItemVisible:false,
        }
    },
    created() {
        this.getDicts("oa_expense_content").then(response => {
            this.ecOptions = response.data;
        });
        this.showCashFun(this.propCashId);
    },
    methods: {
        showCashFun(cashId) {
            showCash({cashId:cashId}).then(
                response => {
                    this.dataFrom = response.data.proCash;
                    this.itemData = response.data.proCashItems;
                }
            )
        },
        //展示报销内容详情
        showItemDetail(row) {
            this.showItemVisible = true;
            this.itemForm = row;
        },
        //格式化报销内容
        formatExpenseCon(row, column, cellValue, index) {
            for(var i in this.ecOptions){
                if(this.ecOptions[i].dictValue == cellValue){
                    return this.ecOptions[i].dictLabel;
                }
            }
        },
        //合计逻辑
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '合计';
                return;
            }
            if (column.property == "costTime" || column.property == "expenseRemark") {
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return (prev*100 + curr*100)/100;
                } else {
                    return prev/100;
                }
                }, 0);
            } else {
                sums[index] = '';
            }
            });

            return sums;
        },
    }
}
</script>